<template>
  <!-- <h4>新增任务</h4> -->
  <el-dialog :title="mode=='add'?'新增':'编辑'"
             class="addTask"
             width='662px'
             :close-on-click-modal="false"
             :visible.sync="visible">
    <!-- 具体表单 -->
    <el-form :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmit()"
             label-width="120px">
      <!-- <el-form-item label="纳税企业ID"
                    v-if="workerIdVisb"
                    prop="companyId">
        <el-input v-model="dataForm.companyId"
                  placeholder="纳税企业ID"></el-input>
      </el-form-item>
      <el-form-item label="税务用ID"
                    prop="taxUserId">
        <el-input v-model="dataForm.taxUserId"
                  placeholder="税务用ID"></el-input>
      </el-form-item> -->
      <el-form-item label="用工企业id"
                    v-if="workerIdVisb && userRoleId === '1'"
                    prop="id">
        <el-input v-model="dataForm.cid"
                  placeholder="企业id"></el-input>
      </el-form-item>
      <el-form-item label="任务名称"
                    prop="taskName">
        <el-input v-model="dataForm.taskName"
                  placeholder="任务名称"></el-input>
      </el-form-item>
      <el-form-item label="任务人数"
                    prop="personCount">
        <el-input v-model="dataForm.personCount "
                  placeholder="任务人数"></el-input>
      </el-form-item>
      <el-form-item label="任务描述"
                    prop="description">
        <el-input type="textarea"
                  maxlength='500'
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="dataForm.description">
        </el-input>
      </el-form-item>
      <el-form-item label="任务要求"
                    prop="demand">
        <el-input type="textarea"
                  maxlength='500'
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="dataForm.demand">
        </el-input>
      </el-form-item>
      <el-form-item label="任务其他描述"
                    prop="otherDescription">
        <el-input type="textarea"
                  maxlength='500'
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="dataForm.otherDescription">
        </el-input>
      </el-form-item>
      <!-- <el-form-item label="手机号"
                    prop="mobile">
        <el-input v-model="dataForm.mobile"
                  placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="姓名"
                    prop="personName">
        <el-input v-model="dataForm.personName"
                  placeholder="姓名"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="合同类型"
                    prop="totalPersonalIncome">
        <el-input v-model="dataForm.totalPersonalIncome"
                  placeholder="合同类型"></el-input>
      </el-form-item> -->
      <el-form-item label="合同类型"
                    prop="contractNo">
        <el-select v-model="dataForm.contractNo"
                   clearable
                   placeholder="请选择">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务时间"
                    prop="taskTime">
        <!-- <el-date-picker v-model="dataForm.taskTime"
                        type="date"
                        placeholder="发放时间"
                        value-format="yyyy-MM-dd">
        </el-date-picker> -->
        <el-date-picker v-model="ReTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        value-format="yyyy-MM-dd"
                        range-separator="-"
                        start-placeholder="发放时间"
                        end-placeholder="截止时间"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="任务状态"
                    v-if="userRoleId==1"
                    prop="receiveState">
        <el-select v-model="dataForm.status"
                   placeholder="请选择">
          <el-option v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="状态"
                    prop="receiveState">
        <el-select v-model="dataForm.receiveState"
                   placeholder="请选择">
          <el-option v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button type="primary"
                 class="btn"
                 @click="addSave"
                 v-if="mode == 'add'">确认新增</el-button>
      <el-button type="primary"
                 class="btn"
                 @click="update"
                 v-else>确认修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      // 判断添加还是编辑
      mode: 'add',
      workerIdVisb: true,
      // 隐藏
      visible: false,
      userRoleId: '',
      // 数据
      dataForm: {
      },
      // 时间区间
      ReTime: [],
      // 验证
      dataRule: {
        taskName: [
          { required: true, message: '任务名称不能为空', trigger: 'blur' }
        ],
        contractNo: [
          { required: true, message: '合同不能为空', trigger: 'change' }
        ],
        // companyId: [
        //   { required: true, message: '纳税企业ID不能为空', trigger: 'blur' }
        // ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              // 手机号码正则校验
              let _reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              if (_reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的手机号码'))
              }
            }
          }
        ]
      },
      // 合同类型
      options: [{
        value: '1',
        label: '合同1'
      }, {
        value: '2',
        label: '合同2'
      }, {
        value: '3',
        label: '合同3'
      }],
      // 状态
      options2: [
        {
          value: 1,
          label: '待审核'
        },
        {
          value: 2,
          label: '审核不通过'
        },
        {
          value: 3,
          label: '待承揽'
        },
        {
          value: 4,
          label: '公司已承接'
        },
        {
          value: 5,
          label: '个人已承接'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
    }
  },
  created () {
    if (sessionStorage.getItem('userRoleId') === '2') {
      this.workerIdVisb = false
    }
    this.userRoleId = sessionStorage.getItem('userRoleId')
    this.$http({
      url: this.$http.adornUrl('/sys/contract/select-contract'),
      method: 'get',
      params: this.$http.adornParams()
    }).then(({ data }) => {
      // let arrlist = {}
      this.options = data.data.map(item => {
        let arrlist = {}
        arrlist.value = item.contractNum
        arrlist.label = item.contractName
        return arrlist
      })
      // console.log(this.options)
      // this.dataForm = data.sysTask
    })
  },
  watch: {
    ReTime () {
      try {
        this.dataForm.taskTime = this.ReTime[0]
        this.dataForm.deadTime = this.ReTime[1]
      } catch (error) {
        this.dataForm.taskTime = ''
        this.dataForm.deadTime = ''
      }
    }
  },
  methods: {
    // 父调用的方法，新增
    addInit () {
      this.visible = true
    },
    // 父调用的方法，编辑
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$http({
        url: this.$http.adornUrl('/sys/task/info/' + this.dataForm.id),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.dataForm = data.sysTask
        try {
          if (data.sysTask.taskTime) {
            this.ReTime.push(data.sysTask.taskTime)
          }
          if (data.sysTask.deadTime) {
            this.ReTime.push(data.sysTask.deadTime)
          }
        } catch (error) {
          this.ReTime = []
        }
      })
    },
    // 修改提交
    update () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/task/update'),
            method: 'post',
            data: this.$http.adornParams(this.dataForm)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  // 成功之后的回调
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 新增
    // /sys/tax/save
    addSave () {
      this.$refs['dataForm'].validate((valid) => {
        if (this.userRoleId !== '1') {
          this.dataForm.cid = this.$store.state.user.id
        }
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/task/save'),
            method: 'post',
            data: this.$http.adornParams(this.dataForm)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  // 成功之后的回调
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
    // 结束
  }
}
</script>

<style lang="scss">
.addTask {
  .el-input.el-input--medium {
    width: 370px;
  }
  .el-dialog__header {
    background-color: #f8f8f8;
  }
  .el-dialog__body {
    display: flex;
    justify-content: center;
  }
  .btn {
    width: 370px;
  }
  .dialog-footer {
    text-align: center !important;
    padding-bottom: 39px;
  }
  .el-dialog__footer {
    text-align: center;
    padding-bottom: 39px;
  }
}
</style>
